<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"></meta>
    <title>header</title>
</head>
<body>
<header th:fragment="header">
    <nav class="main-header navbar navbar-expand navbar-white navbar-light">
        <!-- Left navbar links 收缩展开-->
        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link" data-widget="pushmenu" href="#" role="button"><i class="fas fa-bars"></i></a>
            </li>
        </ul>


        <!-- 右侧顶部 -->
        <ul class="navbar-nav ml-auto">
            <!--个性化-->
            <li class="nav-item">
                <a class="nav-link" data-widget="control-sidebar" data-slide="true" href="#" role="button">
                    <i class="fas fa-palette"></i>
                </a>
            </li>
            <!-- 使用帮助 -->
            <li class="nav-item dropdown">
                <a class="nav-link" data-toggle="dropdown" href="#">
                    <i class="fas fa-question-circle"></i>
                </a>
                <div class="dropdown-menu dropdown-menu-lg dropdown-menu-right text-md-center">
          <span href="#" class="dropdown-item">
              CoolCloud，为作者毕业设计作品！
          </span>
                    <div class="dropdown-divider"></div>
                    <span>高效</span>
                    <div class="dropdown-divider"></div>
                    <span>安全</span>
                    <div class="dropdown-divider"></div>
                    <span>可共享</span>
                </div>
            </li>
            <!-- Notifications Dropdown Menu -->
            <li class="nav-item dropdown">
                <a class="nav-link" data-toggle="dropdown" href="#">
                    <i class="fas fa-user-circle"></i>
                </a>
                <div class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
                    <div class="dropdown-divider"></div>
                    <a href="#" class="dropdown-item">
                        <!-- Message Start -->
                        <div class="media">
                            <img th:src="${session.loginUser.imagePath}" alt="User Avatar"
                                 class="img-size-50 mr-3 img-circle">
                            <div class="media-body">
                                <h3 class="dropdown-item-title">
                                    [[${session.loginUser.userName}]]
                                </h3>
                                <p class="text-sm">[[${session.loginUser.email}]]</p>
                            </div>
                        </div>
                        <!-- Message End -->
                    </a>
                    <div class="dropdown-divider"></div>
                    <a th:href="'javaScript:editMyInfo('+${session.loginUser.userId}+')'" class="dropdown-item">
                        <i class="fas fa-home mr-5"></i>修改用户名/密码
                    </a>
                    <div class="dropdown-divider"></div>
                    <a th:href="@{/logout}" class="dropdown-item">
                        <i class="fas fa-sign-out-alt mr-5"></i> 退出登录
                    </a>
                    <div class="dropdown-divider"></div>
                    <a th:href="'javaScript:invite('+${session.loginUser.userId}+')'" class="dropdown-item">
                        <i class="fas fa-share-alt-square mr-5"></i> 邀请好友注册
                    </a>
                </div>
            </li>
        </ul>
    </nav>
</header>
</body>
</html>